* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  @include prefixer(transition, all $transition-duration-default ease-out, webkit moz o spec);
}

body {
  @include container(inside);
  background: $color-white-alabaster;
  color: $color-blue-lynch;
  font-family: $font-family;
  font-size: 12px;
  overflow-x: hidden;
  max-width: none;
}

a,
a:link,
a:visited,
a:hover, 
a:active {
}

a:hover,
a:active {
}

.coming-soon a,
.disabled {
  cursor: default;
}

@mixin image-replace($filename, $filetype, $width, $height) {	
  display: block; 
  height: $height;
  overflow: hidden;
  text-indent: -9999px; 
  white-space: nowrap; 
  width: $width;
  background-image: url($img-path + $filename + '.' + $filetype);
}

@mixin image-retina($filename, $filetype, $width, $height) {
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (-moz-min-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
      background-image: url($img-path + $filename + '@2x.' + $filetype);
      @include prefixer(background-size, $width $height, webkit moz o spec);    
    }
}

%title {
  color: white;
  font-family: $font-family-title;
  font-weight: $font-weight-light;
  margin-bottom: 32px;
  text-transform: uppercase;
}

%headline {
  font-family: $font-family-headline;
  font-weight: $font-weight-light;
  margin-bottom: 32px;
  text-transform: uppercase;
}

%button {
  color: white;
  display: block;
  background: #67A8FE;
  border-radius: 7px;
  text-align: center;
  font-family: $font-family-headline;
  font-weight: $font-weight-semibold;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px;
  width: 300px;
  &:hover {
    background: darken(#67A8FE, 8%);
  }
}

%resource-button {
  @extend %button;
  background: $color-orange-buttercup;
  position: relative;
  &:before {
    content: ".";
    position: absolute;
    top: 50%;
  }
  &:hover {
    background: $color-orange-koromiko;
  }
}

%docs-button {
  @extend %resource-button;
  padding-left: 68px;
  &:before {
    @include image-replace('docs-icon', 'png', 47px, 39px);
    @include image-retina('docs-icon', 'png', 47px, 39px);
    left: 44px;
    margin-top: -19px;
  }
}

%demo-button {
  @extend %resource-button;
  padding-left: 60px;
  &:before {
    @include image-replace('demo-icon', 'png', 37px, 47px);
    @include image-retina('demo-icon', 'png', 37px, 47px);
    left: 30px;
    margin-top: -23px;
  }
}